<template>
	<view class="content" style="padding-bottom: 150rpx;">
		<u-navbar title="企业公告" placeholder leftIconColor="#c1282e" titleStyle="color:#ffffff" bgColor="#c1282e">
			<view class="flexright xiaobai" slot="right" @click="show = true">切换企业</view>
		</u-navbar>
		<u-sticky bgColor="#f5f5f5">
			<u-tabs :activeStyle="{
          color: '#C1282D',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }" lineColor="#C1282D" :list="list1" @click="changeTab" :itemStyle="{ padding: '30rpx 30rpx 20rpx' }"
				:current="tab"></u-tabs>
		</u-sticky>
		<view v-if="tab == 0">
			<view class="item" v-for="item in noticeList" :key="item.id" @click="toXq(item.id)">
				<view class="right">
					<image :src="pic + item.image" alt="" />
				</view>
				<view class="left">
					<view class="title">{{ item.title }}</view>
					<view class="ggContent">
						{{ item.brief }}
					</view>
					<view class="time">{{ getData(item.create_time) }}</view>
				</view>
			</view>
			<u-empty v-if="noticeList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
		</view>
		<view v-if="tab != 0">
			<u-sticky bgColor="#f5f5f5">
				<view class="search">
					<!-- v-if="(item.id==7 && userAuth.is_lookback==1) || item.id!=7" -->
					<view v-for="(item, index) in searchList" :key="item.id"
						:class="item.id == classIndex ? 'adive' : 'searchItem'" @click="tabClass(item)">{{ item.name }}
					</view>
				</view>
			</u-sticky>
			<view class="mainpadding2">
				<view class="flexbetween ssbox" style="background-color: #fff;" v-if="classIndex==7">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keywords"
							confirm-type="search" @confirm="getList()">
					</view>
					<view class="rightss" @click="getList()">搜索</view>
				</view>
			</view>

			<view class="items" v-for="item in baoBeiList" :key="item.id" @click="toUserXq(item.id)">
				<view class="lie">
					<view class="max-text">{{ item.name }}</view>
					<view class="min-text">{{ item.last_time }}</view>
				</view>
				<view class="lie">
					<view class="sex">{{ item.gender_text }}丨{{ item.age }}岁</view>
				</view>
				<view class="lie">
					<y-tag :text="item.yname"></y-tag>
					<view class="text-color">{{ statusList[item.status] }}</view>
				</view>
				<view class="flexright margin_top1" v-if="item.status==1" @click.stop="edititem(item.id)">
					<view class="flexleft editbtn">
						<u-icon name="edit-pen" color="#fff" size="16"></u-icon>
						<view class="xiaobai margin_left1 main_size">编辑</view>
					</view>
				</view>
			</view>
			<u-empty v-if="baoBeiList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
		</view>
		<view v-if="list1[tab]">
			<view v-if="list1[tab].name == '文员'" class="add" @click="add">
				<image src="../../static/tab1/add.png" alt="" />
			</view>
		</view>
		<tabbar :current="0" ref="tabbarRef"></tabbar>
		<u-popup :show="show" @close="close">
			<view style="padding: 20rpx">
				<u-checkbox-group v-model="companysValue" :borderBottom="true" placement="column" iconPlacement="right">
					<u-checkbox :customStyle="{ marginBottom: '16px' }" v-for="(item, index) in companys" :key="index"
						:label="item.name" :name="item.id">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</u-popup>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
		<u-modal :show="htshow" title="合同到期预警" @confirm="htshow=false" confirmColor="#c1282e">
			<view class="slot-content">
				<!-- 驻场人提醒 -->
				<template v-if="httype==1">
					<scroll-view scroll-y="true" style="max-height: 400rpx;">
						<view class="margin_top1" v-for="(item,index) in htlist" :key="index">
							<text class="xiaohei margin_right1">{{index+1}}.{{item.user.username}}</text>
							<text class="xiaohong margin_right1" style="text-decoration: underline;" @click="callphone(item.user.mobile)">{{item.user.mobile}}</text>
							<text class="xiaohei">《{{item.name}}》将与{{item.end_time_text}}日到期</text>
						</view>
					</scroll-view>
				</template>
				<template v-if="httype==2">
					<view class="margin_top1" v-for="(item,index) in htlist" :key="index">
						<text class="xiaohei">《{{item.name}}》将与{{item.end_time_text}}日到期，请联系驻场负责人</text>
					</view>
				</template>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import yTag from "@/components/y-tag/index";
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		name: "tab-1",
		components: {
			yTag,
		},
		data() {
			return {
				show: false,
				companys: [],
				companysValue: [5, 8],
				baoBeiList: [],
				pic: this.$IMG_URL,
				noticeList: [],
				tab: 0,
				classIndex: 0,
				statusList: [
					"不限",
					"已报备",
					"未通过",
					"已面试",
					"已通过",
					"已入职",
					"已离职",
					"黑名单",
					"未面试",
					"未入职",
				],
				searchList: [{
						name: "不限",
						id: 0
					},
					{
						name: "已报备",
						id: 1
					},
					{
						name: "已面试",
						id: 3
					},
					{
						name: "未面试",
						id: 8
					},
					{
						name: "已通过",
						id: 4
					},
					{
						name: "未通过",
						id: 2
					},
					{
						name: "已入职",
						id: 5
					},
					{
						name: "未入职",
						id: 9
					},
					{
						name: "已离职",
						id: 6
					},
					{
						name: "黑名单",
						id: 7
					},
				],
				list1: [],
				baoBeiList: [],
				userAuth: {},
				groupId: 0,
				companysValue: [],
				user_sn: "", //只有当用户入职后user_sn才有值，否则为null或""
				keywords: "",
				modal: {
					modalShow: false,
					title: "",
				},
				htshow:false,
				htlist:[],
				httype:1,//1 就是驻场人的提醒   2为用户的提醒
			};
		},
		onLoad() {
			uni.hideTabBar()
			this.getUserAuth(1)
		},
		onShow() {
			this.getList();
			this.$nextTick(function() {
				this.$refs.tabbarRef.$emit("childmethod")
			});
			this.getNoticeList();
			this.getUserAuth();
			this.companysValue = uni.getStorageSync("companysValue") || [];
		},
		computed: {
			companysText() {
				const text = [];
				this.companysValue.map((item) => {
					const list = this.companys.filter((items) => items.id === item);
					text.push(list[0]?.name);
				});
				return text;
			},
		},
		methods: {
			modalSure() {
				this.jumpurl('/pages/tab4/chongzhi')
				this.modalcancel(1)
			},
			modalcancel(val) {
				this.modal.modalShow = false
				if (val != 1) {
					this.getUserContract()
				}
			},
			close() {
				this.show = false;
				uni.setStorageSync("companysValue", this.companysValue);
			},
			tabbarRedirection(user_sn = "") {
				//此功能函数用于tabbar重定向

				if (user_sn != null && user_sn != "" && user_sn != undefined) {
					if (this.groupId != 1 && this.groupId != 2) { //驻场、文员
						uni.setTabBarItem({
							index: 1,
							text: '暂无权限',
						})
					}
				}
			},
			async getUserAuth(val) {
				if (!uni.getStorageSync("token")) return;
				const data = await this.http.get("user/getUerInfo");
				if (val == 1 && data.data.yinb_jgdes != "") {
					this.modal.title = data.data.yinb_jgdes
					this.modal.modalShow = true
				}
				if (data.data.yinb_jgdes == "") {
					this.getUserContract()
				}
				this.companys = data.data.companys;
				if (this.groupId == 2 && data.data.group_id == 2) return;
				if (this.groupId == 1 && data.data.group_id == 3) return;
				this.list1 = [{
					name: "公告"
				}];
				if (data.data.group_id == 2) {
					this.groupId = 2;
					this.list1.push({
						name: "项目主管"
					});
					this.list1.push({
						name: "文员"
					});
				} else if (data.data.group_id == 3) {
					this.groupId = 1;
					this.list1.push({
						name: "文员"
					});
				}
				this.tab = 0;
				this.userAuth = data.data
				this.user_sn = data.data.user_sn; //用于判断用户是否入职
				this.tabbarRedirection(this.user_sn);
				// console.log(this.groupId, " this.groupId");
				this.getList();
			},
			getUserContract() {
				httpRequest.request('/api/user/getUserContract', 'GET', {}, false, false, true).then(res => {
					if(res.data.ht_data.length){
						this.httype = res.data.type
						this.htlist = res.data.ht_data
						this.htshow = true
					}
				})
			},
			async getList() {
				if (this.groupId == 1) {
					const res = await this.http.get("baobei/wenindex", {
						status: this.classIndex,
						keywords: this.keywords
					});
					this.baoBeiList = res.data;
				} else if (this.groupId == 2) {
					if (this.tab == 1) {
						const data = await this.http.get("baobei/zhuindex", {
							status: this.classIndex,
							company_ids: this.companysValue.join(","),
						});
						this.baoBeiList = data.data;
					} else if (this.tab == 2) {
						const res = await this.http.get("baobei/wenindex", {
							status: this.classIndex,
							keywords: this.keywords
						});
						console.log(res.data, "res.data");
						this.baoBeiList = res.data;
					}
				}
			},
			tabClass(item) {
				this.keywords = ""
				this.classIndex = item.id;
				this.getList();
			},
			async getNoticeList() {
				const data = await this.http.get("notice/index");
				this.noticeList = data.data;
			},
			changeTab(e) {
				this.tab = e.index;
				this.getList();
			},
			toXq(id) {
				uni.navigateTo({
					url: "/pages/tab1/gonggaoxq?id=" + id,
				});
			},
			toUserXq(id) {
				const type = this.list1[this.tab].name == "文员" ? 1 : 2;
				uni.navigateTo({
					url: "/pages/tab1/userXq?type=" + type + "&id=" + id,
				});
			},
			add() {
				uni.navigateTo({
					url: "/pages/tab1/addBaobei?type=" + this.groupId,
				});
			},
			edititem(id) {
				uni.navigateTo({
					url: "/pages/tab1/addBaobei?type=" + this.groupId + "&id=" + id,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.editbtn {
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
		background-color: #c1282e;
	}

	::v-deep.u-navbar__content__title {
		color: #fff !important;
	}

	.search {
		overflow-x: scroll;
		white-space: nowrap;
		padding: 20rpx 30rpx;
	}

	.searchItem {
		padding: 5rpx 20rpx;
		display: inline-block;
		border: 1rpx solid #999999;
		color: #999999;
		border-radius: 50rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		font-weight: 300;
	}

	.adive {
		padding: 5rpx 20rpx;
		display: inline-block;
		color: #ffffff;
		background-color: #c1282d;
		border: 1rpx solid #c1282d;
		border-radius: 50rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		font-weight: 300;
	}

	.items {
		padding: 20rpx;
		background: #ffffff;
		opacity: 1;
		margin: 30rpx 30rpx 0;
		border-radius: 10rpx;
		align-items: center;

		.lie {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.sex {
				font-size: 24rpx;
			}
		}
	}

	.item {
		padding: 30rpx;
		background: rgba(255, 255, 255, 0.8);
		opacity: 1;
		display: flex;
		margin: 30rpx 30rpx 0;
		border-radius: 10rpx;

		.right {
			width: 180rpx;
			height: 180rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 15rpx;
			}
		}

		.left {
			width: 60%;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			view {
				width: 100%;
			}
		}

		.title {
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			// line-height: 40rpx;
			overflow: hidden;
			color: #000000;
			opacity: 1;
		}

		.ggContent {
			color: #000000;
			font-weight: 300;
			font-size: 24rpx;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 这里是超出几行省略 */
			overflow: hidden;
		}

		.time {
			color: #999999;
			font-size: 24rpx;
			font-weight: 300;
		}
	}

	.add {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>